<template>
  <div class="my-input flex align-center">
    <i :class="['iconfont', icon]"></i>
    <input
      type="text"
      :placeholder="holder"
      :value="value"
      @input="handleInput"
    />
  </div>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      default: "icon-a-001_sousuo",
    },
    holder: {
      type: String,
      default: "开始寻找你梦寐以求的工作...",
    },
    value: {
      //v-model传过来的数据
      type: String,
    },
  },
  methods: {
    handleInput(e) {
      this.$emit("input", e.target.value);
    },
  },
};
</script>

<style lang="scss" scoped>
.my-input {
  width: 65.4rem;
  height: 9.6rem;
  border: 1px solid rgba(238, 238, 238, 1);
  margin: auto;
  .iconfont {
    font-size: 5rem;
    margin: 0 2rem;
  }
  input {
    height: 100%;
    border: 0;
    padding: 0;
    font-size: 2.8rem;
  }
}
</style>
